<template>
  <div style="height: calc(100vh - 52px);">
    <NavBar class="bar">
      <template v-slot:center>
        <p class="font-title text-center">搜索</p>
      </template>
    </NavBar>
    <div class="display-flex p-2 bg-white">
      <input type="text" class="flex-1 textArea" v-model="keyword">
      <input type="button" class="submit ml-2 p-2" value="提交" @click="search"/>
    </div>
    <div class="bg-white display-flex p-2 search" v-if="!noSearchShops" ref="shoplist">
      <ul class="content">
        <li v-for="(item,i) in model" :key="i"  v-show="model" class="border-b pb-2">
          <div class="display-flex ai-center pt-2">
            <img :src="imgBaseUrl+item.image_path" alt="" width="50px" height="50px">
            <div class="pl-2">
              <p>{{item.name}}</p>
              <p>月售{{item.month_sales||item.recent_order_num}}单</p>
              <p>{{item.delivery_fee||item.float_minimum_order_amount}} 元起送 / 距离{{item.distance}}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div v-else class="bg-white" style="height: 100%;">没有数据</div>
  </div>
</template>

<script>
  import NavBar from "../../components/NavBar/NavBar";
  import BScroll from 'better-scroll'
  export default {
    name: 'Search',
    components:{
      NavBar
    },
    data(){
      return {
        keyword:'' ,
        model:{},
        imgBaseUrl: 'http://cangdu.org:8001/img/',
        noSearchShops:true

      }
    },
    methods:{
      async search(){
        //得到搜索关键字
        console.log('ok')
        const geohash =this.$store.state.latitude +',' + this.$store.state.longitude
        const keyword = this.keyword.trim()
        //进行搜索
        if(keyword){
          const res = await this.$http.get(`api/search_shops`,{params:{geohash,keyword}})
          this.model = res.data.data
          if (this.model.length===0){
            this.noSearchShops = true
          } else {
            this.noSearchShops = false
            this.$nextTick(()=>{
              this.scroll = new BScroll(this.$refs.shoplist,{click:true})
              console.log(this.scroll)
            })
          }
          console.log(res)
        }

      }
    }
  }
</script>

<style lang="scss" scoped>
  .textArea{
    border: 4px solid #f2f2f2;
    font-size: 14px;
    color: #333;
    background-color: #f2f2f2;
    height: 35px;
    border-radius: 5px;

  }
  .submit{
    border: 4px solid #02a774;
    font-size: 16px;
    color: #fff;
    height: 35px;
    line-height: 9px;
    border-radius: 5px;
    background-color: #02a774;
  }
  .search{
    height: calc(100vh - 49px - 52px - 52px);
    overflow: hidden;
    position: relative;
    .content{
      position: absolute;
    }
  }
</style>
